<template>
    <div class="c-table">
        <slot name="year"></slot>

        <div class="zk">
            <slot name="table"></slot>

            <el-button @click="changeHeight" :icon="'el-icon-arrow-' + c" type="primary" circle></el-button>
            <el-radio-group v-model="checkList">
                <el-radio :label="1">表</el-radio>
                <el-radio :label="0">图</el-radio>
            </el-radio-group>
        </div>
        <div v-show="height">
            <el-table :data="data" border style="width: 100%;" v-show="checkList">
            <el-table-column
                    :label="labels[index]"
                    :prop="props[index]"
                    v-for="(item, index) of labels"
                    :key="index"
            ></el-table-column>
        </el-table>
        <div v-show="!checkList">
            <slot name="echarts" ></slot>
        </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "c-table",
        props: ["data", "labels", "props"],
        data() {
            return {
                height: true,
                c: "up",
                checkList: 0
            };
        },
        methods: {
            changeHeight: function () {
                this.height = !this.height;
                if (this.c === "up") this.c = "down";
                else this.c = "up";
            }
        },
        mounted() {
        }
    };
</script>

<style scoped>
    .zk {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
</style>